<template>
  <div class="traffic-stats-management">
    <!-- 统计概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-users">
              <i class="el-icon-user" />
            </div>
            <div class="card-info">
              <div class="card-title">总用户数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalUsers) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon active-users">
              <i class="el-icon-user" />
            </div>
            <div class="card-info">
              <div class="card-title">活跃用户</div>
              <div class="card-value">{{ formatNumber(overviewData.activeUsers) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon new-users">
              <i class="el-icon-user" />
            </div>
            <div class="card-info">
              <div class="card-title">新增用户</div>
              <div class="card-value">{{ formatNumber(overviewData.newUsers) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-views">
              <i class="el-icon-view" />
            </div>
            <div class="card-info">
              <div class="card-title">总浏览量</div>
              <div class="card-value">{{ formatNumber(overviewData.totalViews) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-likes">
              <i class="el-icon-thumb" />
            </div>
            <div class="card-info">
              <div class="card-title">总点赞数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalLikes) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-comments">
              <i class="el-icon-chat-line-square" />
            </div>
            <div class="card-info">
              <div class="card-title">总评论数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalComments) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 内容统计卡片 -->
    <el-row :gutter="20" class="overview-cards" style="margin-top: 20px;">
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-articles">
              <i class="el-icon-document" />
            </div>
            <div class="card-info">
              <div class="card-title">总文章数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalArticles) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-topics">
              <i class="el-icon-chat-dot-square" />
            </div>
            <div class="card-info">
              <div class="card-title">总话题数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalTopics) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-columns">
              <i class="el-icon-folder" />
            </div>
            <div class="card-info">
              <div class="card-title">总专栏数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalColumns) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-counselors">
              <i class="el-icon-user-solid" />
            </div>
            <div class="card-info">
              <div class="card-title">咨询师数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalCounselors) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-appointments">
              <i class="el-icon-date" />
            </div>
            <div class="card-info">
              <div class="card-title">预约数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalAppointments) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="overview-card stats-card">
          <div class="card-content">
            <div class="card-icon total-assessments">
              <i class="el-icon-edit-outline" />
            </div>
            <div class="card-info">
              <div class="card-title">测评数</div>
              <div class="card-value">{{ formatNumber(overviewData.totalAssessments) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 日期范围选择器 -->
    <el-card class="filter-card">
      <div class="filter-content">
        <div class="date-range-picker">
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="margin-right: 10px;"
            @change="handleStartDateChange"
          />
          <span class="date-separator">至</span>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="margin-left: 10px;"
            @change="handleEndDateChange"
          />
        </div>
        <el-button type="primary" :loading="loading" @click="refreshData">
          <i class="el-icon-refresh" /> 刷新数据
        </el-button>
        <el-button type="success" :loading="exportLoading" @click="exportData">
          <i class="el-icon-download" /> 导出数据
        </el-button>
      </div>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-grid">
      <!-- 用户活跃度趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span class="chart-title">用户活跃度趋势</span>
            <el-button type="text" @click="refreshUserActivity">
              <i class="el-icon-refresh" /> 刷新
            </el-button>
          </div>
          <div v-loading="userActivityLoading" class="chart-container">
            <div ref="userActivityChart" style="height: 100%; width: 100%;" />
          </div>
        </el-card>
      </el-col>

      <!-- 内容流量趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span class="chart-title">内容流量趋势</span>
            <div class="chart-controls">
              <el-checkbox-group
                v-model="trafficFilters"
                style="margin-right: 10px;"
                size="small"
                @change="handleTrafficFilterChange"
              >
                <el-checkbox label="views">浏览量</el-checkbox>
                <el-checkbox label="likes">点赞数</el-checkbox>
                <el-checkbox label="comments">评论数</el-checkbox>
              </el-checkbox-group>
              <el-button type="text" @click="refreshContentTraffic">
                <i class="el-icon-refresh" /> 刷新
              </el-button>
            </div>
          </div>
          <div v-loading="contentTrafficLoading" class="chart-container">
            <div ref="contentTrafficChart" style="height: 100%; width: 100%;" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-grid">
      <!-- 用户增长趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span class="chart-title">用户增长趋势</span>
            <el-button type="text" @click="refreshUserGrowth">
              <i class="el-icon-refresh" /> 刷新
            </el-button>
          </div>
          <div v-loading="userGrowthLoading" class="chart-container">
            <div ref="userGrowthChart" style="height: 100%; width: 100%;" />
          </div>
        </el-card>
      </el-col>

      <!-- 内容类型分布图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span class="chart-title">内容类型分布</span>
            <el-button type="text" @click="refreshContentTypeStats">
              <i class="el-icon-refresh" /> 刷新
            </el-button>
          </div>
          <div v-loading="contentTypeStatsLoading" class="chart-container">
            <div ref="contentTypeChart" class="content-type-chart" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门内容排行榜 -->
    <el-card class="table-card">
      <div slot="header" class="card-header">
        <span>热门内容排行</span>
        <el-button type="text" @click="refreshPopularContent">
          <i class="el-icon-refresh" /> 刷新
        </el-button>
      </div>

      <el-table
        v-loading="popularContentLoading"
        :data="popularContentData"
        stripe
        style="width: 100%"
        class="data-table"
        :row-class-name="getRowClassName"
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="index" label="排名" width="80" align="center">
          <template slot-scope="scope">
            <div class="rank-cell">
              <span v-if="scope.$index < 3" class="rank-badge" :class="'rank-' + (scope.$index + 1)">
                {{ scope.$index + 1 }}
              </span>
              <span v-else class="rank-number">{{ scope.$index + 1 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="300" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="title-cell">
              <div class="title-text">{{ scope.row.title }}</div>
              <div class="content-id">ID: {{ scope.row.contentId }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="views" label="浏览量" width="120" align="center">
          <template slot-scope="scope">
            <div class="stat-cell">
              <i class="el-icon-view stat-icon" />
              <span class="stat-value">{{ formatNumber(scope.row.views) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="likes" label="点赞数" width="120" align="center">
          <template slot-scope="scope">
            <div class="stat-cell">
              <i class="el-icon-thumb stat-icon" />
              <span class="stat-value">{{ formatNumber(scope.row.likes) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="comments" label="评论数" width="120" align="center">
          <template slot-scope="scope">
            <div class="stat-cell">
              <i class="el-icon-chat-line-square stat-icon" />
              <span class="stat-value">{{ formatNumber(scope.row.comments) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="contentType" label="内容类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="getContentTypeTag(scope.row.contentType).type"
              size="medium"
              effect="light"
            >
              {{ getContentTypeTag(scope.row.contentType).text }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="popularContentPagination.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="popularContentPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="popularContentPagination.total"
          @size-change="handlePopularContentSizeChange"
          @current-change="handlePopularContentCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import trafficStatsMixin from '@/mixins/trafficStatsMixin'

export default {
  name: 'TrafficStatsManagement',
  mixins: [trafficStatsMixin],
  data() {
    return {
      // 日期选择器数据
      startDate: '',
      endDate: ''
    }
  },

  created() {
    this.initDateRange()
    this.initSeparateDates()
    this.loadOverviewData()
    this.loadPopularContentData()
    this.loadUserActivityData()
    this.loadContentTrafficData()
    this.loadContentTypeStatsData()
    this.loadUserGrowthData()
  },

  methods: {
    // 获取表格行样式类名
    getRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) return 'rank-first'
      if (rowIndex === 1) return 'rank-second'
      if (rowIndex === 2) return 'rank-third'
      return ''
    },

    // 处理行点击事件
    handleRowClick(row, column, event) {
      console.log('点击了内容:', row.title)
      // 这里可以添加跳转到内容详情页的逻辑
    },

    // 处理开始日期变化
    handleStartDateChange(value) {
      this.startDate = value
      this.updateDateRange()
    },

    // 处理结束日期变化
    handleEndDateChange(value) {
      this.endDate = value
      this.updateDateRange()
    },

    // 更新日期范围
    updateDateRange() {
      if (this.startDate && this.endDate) {
        this.dateRange = [this.startDate, this.endDate]
        this.refreshData()
      }
    },

    // 初始化分离的日期
    initSeparateDates() {
      if (this.dateRange && this.dateRange.length === 2) {
        this.startDate = this.dateRange[0]
        this.endDate = this.dateRange[1]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/trafficStats.scss';
</style>
